import Icon from '@/components/Icon';
import styles from './index.module.scss';
import dayjs from 'dayjs';
import { ICommentItem } from '@/store/reducer/comment';
import { useAppDispatch } from '@/store';
import {
  likeCommentByIdActon as likeCommentByIdAction,
  saveOriginAction,
} from '@/store/action/comment';

type Props = {
  comment: ICommentItem;
  type?: 'normal' | 'origin' | 'reply';
};

export default function CommentItem({ comment, type = 'normal' }: Props) {
  const dispatch = useAppDispatch();
  if (!comment.aut_name) return <h3>这里是评论列表</h3>;
  return (
    <div className={styles.root}>
      <div className="avatar">
        <img src={comment.aut_photo} alt="" />
      </div>

      <div className="comment-info">
        <div className="comment-info-header">
          <span className="name">{comment.aut_name}</span>

          <span
            className="thumbs-up"
            onClick={() =>
              dispatch(likeCommentByIdAction(comment.com_id, comment.is_liking, type))
            }
          >
            {comment.like_count}
            <Icon type={comment.is_liking ? 'iconbtn_like_sel' : 'iconbtn_like2'} />
          </span>
        </div>

        <div className="comment-content">{comment.content}</div>

        <div className="comment-footer">
          {type === 'normal' && (
            <span className="replay" onClick={() => dispatch(saveOriginAction(comment))}>
              {comment.reply_count}回复 <Icon type="iconbtn_right" />
            </span>
          )}

          <span className="comment-time">{dayjs().from(comment.pubdate)}</span>
        </div>
      </div>
    </div>
  );
}
